<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useAddClassificationStore } from '../../store/addClassification'
import classification from '../../api/classification'
import { useClassificationListStore } from '../../store/classificationList'
import { classificationList } from '../../utils/trueType'
const classificationListStore = useClassificationListStore()
const innerVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const addClassificationStore = useAddClassificationStore()
const rules: FormRules = {
}
function addCategory() {
    innerVisible.value = true
    addClassificationStore.ruleForm.category = ''
}
function addCategoryFailed() {
    innerVisible.value = false
    addClassificationStore.ruleForm.category = ''
}
async function addClassification() {

    console.log({ subcategory: addClassificationStore.ruleForm.subcategory, subcategoryId: addClassificationStore.ruleForm.subcategoryId, categoryId: addClassificationStore.ruleForm.categoryId, subcategoryIsDeactivate: addClassificationStore.ruleForm.subcategoryIsDeactivate }, { categoryId: addClassificationStore.ruleForm.categoryId, category: addClassificationStore.ruleForm.category, categoryIsDeactivate: addClassificationStore.ruleForm.categoryIsDeactivate })

    await classification.addClasssification({ subcategory: addClassificationStore.ruleForm.subcategory, subcategoryId: addClassificationStore.ruleForm.subcategoryId, categoryId: addClassificationStore.ruleForm.categoryId, subcategoryIsDeactivate: addClassificationStore.ruleForm.subcategoryIsDeactivate }, { categoryId: addClassificationStore.ruleForm.categoryId, category: addClassificationStore.ruleForm.category, categoryIsDeactivate: addClassificationStore.ruleForm.categoryIsDeactivate }).then(() => {
        addClassificationStore.setRuleFormNull()
        addClassificationStore.changeIsOpen()
    }).catch((err) => {
        console.log(err)
    })
    await classification.getClassificationList(classificationListStore.pageNum, classificationListStore.pageSize).then((res) => {
        classificationListStore.classificationList = res.data.data.map((item: classificationList) => ({
            ...item,
            children: item.children?.map(child => ({ ...child, selected: false })) // 初始化子项选中状态
        }))
    })

}
onMounted(async () => {
})
</script>
<template>
    <el-dialog v-model="addClassificationStore.isOpen" title="新增藏品" width="800" align-center>
        <el-form ref="ruleFormRef" :model="addClassificationStore.ruleForm" :rules="rules" label-width="100px"
            class="demo-ruleForm">
            <el-form-item label="一级分类：" prop="categoryId">
                <el-select v-model="addClassificationStore.ruleForm.categoryId" placeholder="请选择一级分类"
                    style="width: 240px" clearable>
                    <el-option v-for="item in addClassificationStore.categoryList" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="addCategory" class="source-info-btn">
                    点我新增一级分类
                </el-button>
            </el-form-item>
            <el-dialog v-model="innerVisible" title="新增一级分类" width="500" align-center>
                <div style="display: flex;justify-content: center;align-items: center;">
                    <el-form>
                        <el-form-item label="分类名称：" prop="category" style="margin-top: 1rem;">
                            <el-input v-model="addClassificationStore.ruleForm.category" placeholder="请输入一级分类"
                                style="width: 240px"></el-input>
                        </el-form-item>
                        <el-form-item label="状态：" prop="categoryIsDeactivate" style="margin-top: 1rem;">
                            <el-switch v-model="addClassificationStore.ruleForm.categoryIsDeactivate" active-value="1"
                                inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" active-text="启用"
                                inactive-text="停用"></el-switch>
                        </el-form-item>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="addCategoryFailed">取消</el-button>
                        <el-button type="primary" @click="innerVisible = false">
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-form-item label="二级分类：" prop="subcategory" width="240px">
                <el-input v-model="addClassificationStore.ruleForm.subcategory" placeholder="请输入二级分类"
                    style="width: 240px"></el-input>
            </el-form-item>
            <el-form-item label="状态：" prop="subcategoryIsDeactivate">
                <el-switch v-model="addClassificationStore.ruleForm.subcategoryIsDeactivate" active-value="1"
                    inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" active-text="启用"
                    inactive-text="停用"></el-switch>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addClassificationStore.changeIsOpen">取消</el-button>
                <el-button type="primary" @click="addClassification">
                    新增
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped>
.demo-ruleForm {
    margin: 1rem auto;
}

.source-info-btn {
    width: 30%;
    margin-left: 1rem;
    font-size: 15px;
    transition: all 0.3s ease;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
    }
}
</style>